<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>No.6 | Slider</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="loading">
        <div class="box">
            <div class="qiu"></div>
            <div class="qiu"></div>
            <div class="qiu"></div>
            <div class="qiu"></div>
        </div>
    </div>
    <div class="bg">
        <img src="./images/10305518-1.flv_20171118_174817.317.jpg" alt="bg" class="bg-img">
        <img src="./images/10305518-1.flv_20171118_174817.317.jpg" alt="bg-animation" class="bg-img js-bg-animation">
    </div>
    <ui class="img-list">
        <li class="img-item"><img data-animation="animation1" src="./images/10305518-1.flv_20171118_174817.317.jpg" alt="tony" class="thumbnail"></li>
        <li class="img-item"><img data-animation="animation2" src="./images/10305518-1.flv_20171118_174822.728.jpg" alt="tony" class="thumbnail"></li>
        <li class="img-item"><img data-animation="animation3" src="./images/10305518-1.flv_20171118_174833.247.jpg" alt="tony" class="thumbnail"></li>
        <li class="img-item"><img data-animation="animation4" src="./images/10305518-1.flv_20171118_174918.100.jpg" alt="tony" class="thumbnail"></li>
        <li class="img-item"><img data-animation="animation5" src="./images/10305518-1.flv_20171118_175036.650.jpg" alt="tony" class="thumbnail"></li>
    </ui>
    <script>
        window.onload = function() {
            document.body.removeChild(document.getElementsByClassName("loading")[0]);
        }
        var list = document.getElementsByClassName("img-list")[0];
        var bg = document.getElementsByClassName("bg-img")[0];
        var bgImg = document.getElementsByClassName("js-bg-animation")[0];
        var src, animation, oldAnimation;

        bgImg.addEventListener('animationend', function(){
            bg.src = src;
            bgImg.classList.remove(animation);
        }, false);

        list.addEventListener("click", function(e){
            var event = e || window.event;
            var target = event.target || event.srcElement;
            if(target && target.nodeName === "IMG") {
                animation = target.dataset.animation;
                src = bgImg.src = target.src;
                bgImg.classList.remove(oldAnimation);
                bgImg.classList.add(animation);
                oldAnimation = animation;
            }
        }, false);

        // 禁止图片拖拉
        function imgdragstart(){return false;}
        for(i in document.images)document.images[i].ondragstart=imgdragstart;
    </script>
</body>
</html>